<template>
  <div class="button-code" @click="send">
    <slot></slot>
  </div>
</template>

<script>
  export default {
    name: "ButtonCode",
    data(){
      return {
        status:true,
        timer:null,
        number:0
      }
    },
    props:{
      times:{
        type:Number,
        default:60
      }
    },
    methods:{
      clearSend(){
        this.number=this.times-1
        this.status=true
        this.$emit('sendOver')
        clearInterval(this.timer)
        this.timer=null;
      },
      send(){
        if(!this.status){
          return
        }
        this.status=false
        this.$emit('sendSart',this.number)
        this.timer=setInterval(()=>{
          if(this.number<2){
            this.number=this.times-1
            this.status=true
            this.$emit('sendOver')
            clearInterval(this.timer)
            this.timer=null;
          }else{
            this.number--;
            this.$emit('sending',this.number)
          }

        },1000)
      }
    },
    watch:{
      times:{
        immediate:true,
        handler(newVal){
          this.number=newVal-1
        }
      }
    }
  }
</script>

<style scoped>

</style>
